<template>
  <el-container direction="vertical">

    <navMenu width="100%"></navMenu>
    <el-container direction="horizontal">
      <el-aside width="280px" height="100%">
        <sideBar class="menu" page-index="3-3" open-index="3"></sideBar>
      </el-aside>
      <el-main>
        <!--        <el-form :model="userForm" ref="userForm" label-width="15vw">-->
        <!--          <el-form-item label="头像">-->
        <!--            <label for="img_upload">  &lt;!&ndash; 通过label标签触发选择文件的输入框 &ndash;&gt;-->
        <!--              <el-avatar v-if="picurl==null" icon="el-icon-user-solid"></el-avatar>-->
        <!--              <el-avatar v-if="picurl!=null" :src="picurl"></el-avatar>-->
        <!--            </label>-->
        <!--            <input type="file" id="img_upload"/>  &lt;!&ndash; 可以把这个标签隐藏，因为它丑... &ndash;&gt;-->
        <!--          </el-form-item>-->
        <!--          <div class="button">-->
        <!--            <div class="zhuce" @click="onSubmit()">立即注册</div>-->
        <!--          </div>-->
        <!--          <label class="layui-form-label">专题图片</label>-->
        <!--          <button @click="getPic">获取图片</button>-->
        <!--          <img :src="picurl" alt="test" />-->
        <!--        </el-form>-->
        <el-table
          :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)"
          height="502"
          style="width: 100%; margin-top: 20px">


          <el-table-column
            prop="id"
            label="志愿者编号">
          </el-table-column>

          <el-table-column
            prop="username"
            label="志愿者名称">
          </el-table-column>

          <el-table-column
            prop="imgset_dir"
            label="志愿者头像" >
            <template width="40" slot-scope="scope">
              <el-image :src="scope.row.imgset_dir" style="width: 100px; height: 100px"
                        :fit="fill"></el-image>
            </template>
          </el-table-column>


          <el-table-column label="操作" width="150px">
            <template slot-scope="scope">

              <el-button icon="el-icon-edit" circle size="small"
                         @click="drawer2 = true,userForm.id=scope.row.id.toString(),userForm.imgbase=scope.row.imgset_dir"></el-button>
              <el-drawer
                title="修改头像"
                :visible.sync="drawer2"
                :direction="direction"
                ref="thisdrawer2">

                <el-row :gutter="20" style="margin-top: 30px">
                  <el-col :span="6" :offset="2">志愿者编号</el-col>
                </el-row>
                <el-row :gutter="20" style="margin-top: 12px">
                  <el-col :span="20" :offset="2" ><el-input v-model="userForm.id" placeholder="请输入志愿者编号" clearable ></el-input></el-col>
                </el-row>
                <el-row :gutter="20" style="margin-top: 30px">
                  <el-col :span="6" :offset="2" >志愿者头像</el-col>
                </el-row>
                <el-row :gutter="20" style="margin-top: 12px">
                  <el-col :span="20" :offset="2" ><label for="img_upload">  <!-- 通过label标签触发选择文件的输入框 -->
                    <el-avatar icon="el-icon-user-solid" @click="init_my()"></el-avatar>
                  </label>
                    <input type="file" id="img_upload" @click="init_my()"/>  <!-- 可以把这个标签隐藏，因为它丑... --></el-col>
                </el-row>

                <el-row :gutter="20" style="margin-top: 40px">
                  <el-col :span="6" :offset="2">
                    <el-button @click="onSubmit()" type="primary" style="width: 130%">确认提交</el-button></el-col>
                </el-row>
              </el-drawer>
            </template>
          </el-table-column>

        </el-table>
        <div style="text-align: center;margin-top: 20px;">
          <el-pagination
            background
            layout="prev, pager, next"
            :total="total"
            :page-size="pagesize">
          </el-pagination>
        </div>

      </el-main>
    </el-container>
  </el-container>

</template>


<script>
import sideBar from "@/components/sideBar";
import navMenu from "@/components/navMenu";

export default {
  components: {sideBar, navMenu},
  data() {
    return {
      tableData: [],
      picurl: null,
      userForm: {
        imgbase: '',
        id:''
      },
      total: 0,
      pagesize: 8,
      currentPage: 1,
      st: 2,
      direction: 'rtl',
      editsubinfo: {
        id: '',
        name: '',
        gender: '',
      }
    }
  },
  mounted() {
    this.$axios.get(`http://127.0.0.1:5000/volunteerInfo`).then((res) => {
      console.log(res);
      this.tableData = res.data;
      this.total = this.tableData.length;
      this.total = this.tableData.length;
      console.log(this.total);
      console.log(res.data);
    });
  },
  methods: {
    init_my(){
      let img_upload;
      let _this=this;
      img_upload = document.getElementById( "img_upload" );  // 获取文件框
      img_upload.addEventListener( 'change', function readFile() {
        let file = this.files[0];
        if (!/image\/\w+/.test( file.type )) {
          return false;
        }
        let reader = new FileReader();
        reader.readAsDataURL( file );
        reader.onload = function () {
          _this.userForm.imgbase = this.result;
        }
      }, false );

    },

    onSubmit() {
      this.$axios.post(`http://127.0.0.1:5000/1text`, this.userForm).then((res)=>{
        console.log(res);
        this.$message({
          showClose: true,
          message: '上传成功!!!',
          type: 'info'
        });
      });
    },

    getPic() {
      this.$axios.post("http://127.0.0.1:5000/1text1", this.userForm).then((res)=>{
        this.picurl =
          res.data[0].imgset_dir;
      });
    },
  },
  watch: {

  },
  created() {
  }
}
</script>
<style scoped>
h2 {
  text-align: center;
  padding: 30px;
  font-size: 18px;
}
</style>
